import { useState } from "react";
import "./index.less";
import MeauBox from "../components/MeauBox";

function MessageItem({ data }: any) {
  const { item, index } = data;
  const { source } = item;

  const cssBySource = source === 'message' ? 'isMessage' : 'isReply';

  const [isShowMessageMeau, setIsShowMessageMeau] = useState(false);

  const handleRightClick = (event: any) => {
    event.preventDefault();
    const flag = !isShowMessageMeau;
    setIsShowMessageMeau(flag);
  };

  return (
    <div className={`message-item ${cssBySource}`}>
      <img className="message-avatar" src={item.avatar} alt="" />
      <div className="message-item-right">
        <div className="message-item-content text-style" onContextMenu={handleRightClick}>
          <MeauBox isShowBox={isShowMessageMeau} data={data} />
          <div className="message-triangle"></div>
          {
            item.special ?
              <span className="message-item-special text-style">
                {item.special}
              </span> :
              null
          }
          {item.message}
        </div>
        {
          item.replyData ?
            <div className="message-item-replyTips text-style one-line-text-overflow">
              {item.replyData.nickName}：{item.replyData.message}
            </div> :
            null
        }
      </div>
    </div>
  );
}

export default MessageItem;
